import gradio as gr
from ChatLyyAI import ChatLYY

# 自定义 CSS 样式
custom_css = """
/* 头部横幅图片样式 */
#banner-image {
    display: block;
    margin: auto;
    max-width: 200px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s ease-in-out;
}

/* 标题样式 */
.app-title {
    text-align: center !important;
    color: #2c3e50 !important;
    font-family: 'Microsoft Yahei', sans-serif !important;
    margin-bottom: 20px !important;
    font-size: 36px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideDown 1s ease-in-out;
}

/* 头部引言样式 */
.header-quote {
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    margin-bottom: 10px;
    animation: fadeIn 1s ease-in-out;
}

/* 聊天容器样式 */
.chat-container {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    animation: fadeIn 1s ease-in-out;
}

/* 用户消息样式 */
.message.user {
    background-color: #3498db;
    color: white;
    border-radius: 10px;
    padding: 10px 15px;
    margin: 5px;
    align-self: flex-end;
    max-width: 70%;
    animation: fadeInRight 0.5s ease-in-out;
}

/* 机器人消息样式 */
.message.bot {
    background-color: #ecf0f1;
    color: #2c3e50;
    border-radius: 10px;
    padding: 10px 15px;
    margin: 5px;
    align-self: flex-start;
    max-width: 70%;
    animation: fadeInLeft 0.5s ease-in-out;
}

/* 输入框样式 */
#input-textbox {
    border-radius: 25px;
    border: 1px solid #bdc3c7;
    padding: 12px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease-in-out;
}

#input-textbox:focus {
    border-color: #3498db;
    outline: none;
}

/* 发送按钮样式 */
.send-btn {
    margin-left: 10px !important;
    border-radius: 25px;
    background-color: #3498db;
    color: white;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.send-btn:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}

/* 页脚样式 */
.footer {
    text-align: center;
    color: #666;
    margin-top: 20px;
    animation: fadeIn 1s ease-in-out;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
"""

def generate(input_text, chat_history):
    chat_history.append((input_text, ""))
    yield chat_history, ""

    full_response = ""
    chat = ChatLYY()

    chat_history[-1] = (input_text, "▌")
    yield chat_history, ""

    for chunk in chat.stream(input_text):
        full_response += chunk
        chat_history[-1] = (input_text, full_response + "▌")
        yield chat_history, ""

    chat_history[-1] = (input_text, full_response)
    yield chat_history, ""


with gr.Blocks(
        theme=gr.themes.Soft(
            primary_hue="blue",
            secondary_hue="cyan"
        ),
        css=custom_css,
        title="ChatLYY"
) as lyh:
    # 页面头部
    gr.HTML("""
    <div class="header-quote">
        <h3>Opportunity favors the prepared mind.</h3>
    </div>
    <h1 class="app-title">ChatLYY</h1>
    """)

    # 聊天主区域
    with gr.Column(elem_classes="chat-container"):
        chatbot = gr.Chatbot(
            label="对话记录",
            height=580,
            bubble_full_width=False,
            elem_id="chatbot"
        )

        # 输入区域
        with gr.Row():
            msg = gr.Textbox(
                scale=8,
                placeholder="请输入您的问题，按回车提交...",
                lines=2,
                max_lines=5,
                container=False,
                autofocus=True,
                elem_id="input-textbox"
            )
            btn = gr.Button(
                "发送",
                scale=2,
                min_width=80,
                variant="primary",
                elem_classes="send-btn"
            )

    # 页脚信息
    gr.Markdown("""
    <div class="footer">
        <p>🛠️ 由蓝羊羊AI引擎驱动 | 作者:LYH | 🌐 版本：2.1.0</p>
    </div>
    """)

    # 交互逻辑
    btn.click(
        generate,
        [msg, chatbot],
        [chatbot, msg]
    )
    msg.submit(
        generate,
        [msg, chatbot],
        [chatbot, msg]
    )

lyh.launch()